<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentPath = ref(sessionStorage.getItem('currentPath') || '/home')
const state = reactive({
  menuList: [
    {
      title: 'vue3-api',
      path: '/home'
    },
    {
      title: 'tailwind',
      path: '/tailwind'
    },
    {
      title: 'swiper',
      path: '/swiper'
    },
    {
      title: 'gsap',
      path: '/gsap'
    },
    {
      title: 'javascript',
      path: '/javascript'
    }
  ]
})
const goPath = (path) => {
  currentPath.value = path
  router.push({
    path
  })
}
</script>

<template>
  <div class="w-[100%] h-[100vh] flex">
    <div class="w-[100px] bg-gray-700">
      <ul class="pt-[2px] text-white">
        <li
          class="h-[40px] leading-[40px] pl-[10px] border-b border-[#333] cursor-pointer"
          :class="{ 'bg-[#fff] text-[#333]': currentPath === menu.path }"
          v-for="(menu, index) in state.menuList"
          :key="index"
          @click="goPath(menu.path)"
        >
          {{ menu.title }}
        </li>
      </ul>
    </div>
    <div class="flex-1 w-[0px] p-[10px] overflow-y-auto">
      <router-view v-slot="{ Component }">
        <keep-alive :include="['List', 'Home']" :max="1">
          <component :is="Component"></component>
        </keep-alive>
      </router-view>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
